

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>餐饮后台管理系统--添加菜单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/static/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/static/css/all.css" type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/static/css/index.css" type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/static/css/index.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/static/css/pages-user-profile.css" type="text/css">
    <script src="${pageContext.request.contextPath}/admin/static/js/down.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/admin/static/js/menu.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/admin/static/js/userbox.js" type="text/javascript"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        body {
            color: #777777;
            background:#FFFFFF;}
        .sidebar-left {
            top: 60px;
            bottom: 0;
            left: 0;
            padding-bottom: 50px;
            position: fixed;
            background: #302b63;
            vertical-align: top;
            width: 300px;
        }

        .page-header {
            background: #302b63;

        }
        .sidebar-left .sidebar-header .sidebar-toggle{
            background-color: #6576ba;
        }
        a{
            color: #966bbf;
        }
        .table{
            margin: auto;
            text-align: center;
        }
        .msg{
                width: 300px;
                margin: 20px auto;
                text-align: center;
                color: red;
            }
    </style>
</head>

<body>

<section class="body">
    <header class="header">
        <div class="header-left logo-con">
            <a href="${pageContext.request.contextPath}/admin/index" class="logo">FOOD</a>
        </div>
        <div class="header-right">

            <span class="separator"></span>
            <div id="button" class="userbox">
                <a href="#" data-toggle="dropdown">
                    <figure class="profile-picture">
                        <img src="static/images/user.jpg" alt="舒克·张" class="img-circle" data-lock-picture="头像">
                    </figure>
                    <div class="profile-info" data-lock-name="舒克" data-lock-email="337828925@qq.com">
                            <span class="name">
									<font style="vertical-align: inherit;">${admin.adminName}</font>
								</span>
                        <span class="role">
									<font style="vertical-align: inherit;">营业额:￥${admin.turnover}</font>
								</span>
                    </div>
                    <i style="font-size:18px;font-weight: bold;color: #777777;" class="fa">&#xf107</i>
                </a>
                <div class="dropdown-menu">
                    <ul class="list-unstyled">
                        <li class="divider"></li>
                        <li>
                            <a href="${pageContext.request.contextPath}/admin/adminRegister">
                                <i style="font-size:24px" class="fa">&#xf007</i>
                                <font style="vertical-align: inherit;">注册</font>
                            </a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/admin/adminLogout">
                                <i style="font-size:24px" class="fa">&#xf011</i>
                                <font style="vertical-align: inherit;" type="button" id="logout">退出</font>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <div class="inner-wrapper">
        <aside id="sidebar-left" class="sidebar-left">
            <div class="sidebar-header">
                <div class="sidebar-toggle">
                    <a href="${pageContext.request.contextPath}/admin/index">
                        <i style="font-size:20px" class="fa">&#xf00b</i>
                    </a>
                </div>
            </div>
            <div class="nav scrollbar">
                <div class="nav-content">
                    <nav id="menu" role="navigation">
                        <ul class="nav-main" id="list">
                            <li class="nav-parent">
                                <a>
                                    <i style="font-size:24px" class="fa">&#xf0f6</i>
                                    <span>
                                            <font style="vertical-align: inherit;"> 菜单管理</font>
                                    </span>
                                </a>
                                <ul class="nav nav-children">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/admin/cuisineList" id="page_1">
                                            <font style="vertical-align: inherit;">菜单列表</font>
                                        </a>

                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/admin/cuisineAdd" id="page_2">
                                            <font style="vertical-align: inherit;">添加菜单</font>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li >
                                <a href="${pageContext.request.contextPath}/admin/cartList">
                                    <i class="fa fa-shopping-cart" style="font-size: 24px" aria-hidden="true"></i>
                                    <span>
                                        <font style="vertical-align: inherit;">购物车</font>
                                    </span>
                                </a>

                            </li>
                            <li class="nav-parent">
                                <a>
                                    <i style="font-size:24px" class="fa">&#xf2c0</i>
                                    <span>
                                        <font style="vertical-align: inherit;">订单管理</font>
                                    </span>
                                </a>
                                <ul class="nav nav-children">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/admin/orderList?index=1&payFlag=1">
                                            <font style="vertical-align: inherit;">已支付订单</font>
                                        </a>
                                        <a href="${pageContext.request.contextPath}/admin/orderList?index=1&payFlag=0">
                                            <font style="vertical-align: inherit;">未支付订单</font>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-parent">
                                <a>
                                    <i style="font-size:24px" class="fa">&#xf2c0</i>
                                    <span>
                                        <font style="vertical-align: inherit;">分类管理</font>
                                    </span>
                                </a>
                                <ul class="nav nav-children">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/admin/categoryAdd">
                                            <font style="vertical-align: inherit;">添加分类</font>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/admin/categoryList">
                                            <font style="vertical-align: inherit;">分类列表</font>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </aside>


        <section class="content-body">
            <header class="page-header">
                <h2>修改</h2>
            </header>
            <div class="tab-pane" style="display: block;">
                <div class="msg">${msg}</div>
                <form class="layui-form" action="${pageContext.request.contextPath}/admin/cuisineUpdate" method="post">
                    <fieldset>
                        <div class="form-group">
                            <label class="control-label">
                                <font style="vertical-align: inherit;">菜品名称</font>
                            </label>
                            <input type="text" class="form-control-user" id="foodName" name="cuisineName" value="${cuisine.cuisineName}" >
                        </div>
                        <div class="form-group">
                            <label class="control-label">
                                <font style="vertical-align: inherit;">价格</font>
                            </label>
                            <input type="number" id="foodPrice" class="form-control-user"
                                   step="0.1" min="0" name="cuisinePrice" value="${cuisine.cuisinePrice}" >
                        </div>


                        <div class="form-group">
                            <label class="control-label">
                                <font style="vertical-align: inherit;">菜品类型</font>
                            </label>
                            <div >
                                <select name="category" class="form-control-user" id="foodType" style="height: 39px;width: 610px !important;">
                                    <option value="">请选择菜品分类</option>
                                    <c:forEach items="${list}" var="item">
                                        <option value="${item.categoryId}" <c:if test="${item.categoryId==cuisine.categoryId}">selected</c:if>>${item.categoryName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <fieldset>
                            <div class="form-group">
                                <label class="control-label">
                                    <font style="vertical-align: inherit;">菜品详情</font>
                                </label>
                                <div class="item">
                                    <input type="file" name="file" onchange="upload(this)" value="上传菜品照片">
                                </div>
                                <img id="pic" style="display:block;width: 300px;height: 300px;margin-bottom: 30px;" src="${cuisine.cuisinePhoto}">
                                <input id="cuisinePhoto" name="cuisinePhoto" type="hidden" value='${cuisine.cuisinePhoto}'>
                                <input id="" name="cuisineId" type="hidden" value="${cuisine.cuisineId}">
                            </div>
                        </fieldset>
                    </fieldset>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="footer-btn">
                                <button type="sumbit" class="btn btn-primary" id="addSucc">保存修改</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </div>
</section>
<script href="${pageContext.request.contextPath}/admin/static/layui/layui.all.js"></script>
<script type="text/javascript">
    const E = window.wangEditor;
    const editor = new E('#div1');
    //配置上传图片的路径
    editor.config.uploadImgServer = '${pageContext.request.contextPath}/common/upload';
    editor.config.uploadFileName = 'file';
    editor.config.showLinkImg = false;
    // 配置触发 onchange 的时间频率，默认为 200ms
    editor.config.onchangeTimeout = 500; // 修改为 500ms
    // 或者 const editor = new E( document.getElementById('div1') )
    // 设置编辑区域高度为 500px
    editor.config.height = 800
    editor.create();
    // 配置 onchange 回调函数
    editor.config.onchange = function (newHtml) {
        document.getElementById("pic").value = newHtml;
    };
    //上传封面图片
    function upload(e){
        let pic = e.files[0];
        let form = new FormData();
        form.append("file",pic);

        let xhr = new XMLHttpRequest();
        xhr.open("post","${pageContext.request.contextPath}/common/upload");
        xhr.send(form);
        xhr.onreadystatechange = function (){
            if(xhr.readyState==4&&xhr.status==200){
                //将服务上传成功的返回字符串转成JSON
                let result = JSON.parse(xhr.responseText);
                //获取服务器返回的图片地址
                let url = result.data[0].url

                //获取显示封面的img标签
                let img = document.getElementById("pic");
                //修改img的样式，让img显示
                img.style.display = "block";
                //修改img的地址，让封面图片显示
                img.src = url;
                //将服务器返回的图片地址写入的表单隐藏域中
                document.getElementById("cuisinePhoto").value = url;
            }
        }
    }
    var layer = layui.layer
        ,form = layui.form;
</script>